<% title "Add the DEV Badge to your personal site" %>

<%= content_for :page_meta do %>
  <link rel="canonical" href="https://dev.to/p/badges"/>
  <meta name="description" content="Add the DEV Badge to your personal site">
  <meta name="keywords" content="software development,engineering,rails,javascript,ruby">

  <meta property="og:type" content="article" />
  <meta property="og:url" content="https://dev.to/p/badges" />
  <meta property="og:title" content="Add the DEV Badge to your personal site" />
  <meta property="og:image" content="https://thepracticaldev.s3.amazonaws.com/i/kjn1gduswyrrisc1basc.png" />
  <meta property="og:description" content="Show visitors that you are an active member of our wonderful community. Put the badge on your personal website or use it as you see fit." />
  <meta property="og:site_name" content="The Practical Dev" />

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@ThePracticalDev">
  <meta name="twitter:title" content="Add the DEV Badge to your personal site">
  <meta name="twitter:description" content="Show visitors that you are an active member of our wonderful community. Put the badge on your personal website or use it as you see fit.">
  <meta name="twitter:image:src" content="https://thepracticaldev.s3.amazonaws.com/i/kjn1gduswyrrisc1basc.png">
<% end %>



<header>
  <div class="blank-space"></div>
</header>
<div class="container article">
  <div class="title">
    <h1>
      Add the DEV Badge to your personal site
    </h1>
  </div>
  <div class="body">
      <p>
        Show visitors that you are an active member of our wonderful community. Put the badge on your personal website or use it as you see fit.
      </p>
      <% if user_signed_in? %>
        <p>
          <a href="https://dev.to/<%= current_user.username %>">
            <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="<%= current_user.name%>'s DEV Profile" height="30" width="30" />
          </a>
        </p>
        <p>
          Make the image as big or as small as you like by modifying the <code>height</code> and <code>width</code> attributes. The badge is an SVG hosted on Amazon Cloudfront and is <b>only 1kb</b> in size.
        </p>
        <p>
          Here is the full code for adding the badge with a link to your profile:
        </p>
        <pre class="embed-code">

&lt;a href="https://dev.to/<%= current_user.username %>"&gt;
  &lt;img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" alt="<%= current_user.name%>'s DEV Profile" height="30" width="30" /&gt;
&lt;/a&gt;
        </pre>
      <% else %>
        <p>
          <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" height="30" width="30" />
        </p>
        <h2 style="text-align:center;">
          <a href="/enter">Log in to view your custom embed code</a>
        </h2>
        <br/><br/>
      <% end %>
  </div>
</div>
